<template>
  <view style="padding-top: 100rpx;">
    <!-- 输入值区域 -->
    <view class="text-area">
      <text class="label">输入值：</text>
      <input type="text" v-model="title" class="input input-red" />
    </view>
    <!-- 回传值区域 -->
    <view class="text-area">
      <text class="label">回传值：</text>
      <input type="text" :value="callBackValue" class="input input-red" />
    </view>
    <!-- 子组件 -->
    <compA :intent="title" @sendToBrother="receiveFromCompA"></compA>
    <compB :result="brotherValue" @callBackFun="callBack"></compB>
  </view>
</template>

<script>
import compA from '../../components/CompA.vue';
import compB from '../../components/CompB.vue';

export default {
  components: { compA, compB },
  data() {
    return {
      title: '',
      callBackValue: '',
      brotherValue: ''
    }
  },
  methods: {
    receiveFromCompA(val) {
      this.brotherValue = val;
    },
    callBack(msg) {
      this.callBackValue = msg;
    }
  }
}
</script>

<style scoped>
/* 整体输入区域布局 */
.text-area {
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
/* 标签样式 */
.label {
  width: 120rpx;
  font-size: 28rpx;
}
/* 输入框通用样式 */
.input {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  background-color: #fff;
  font-size: 28rpx;
}
/* 输入值-红色文本 */
.input-red {
  color: red;
}
/* 回传值-黄色文本 */
.input-yellow {
  color: yellow;
}
</style>